<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合预览示例</title>
    <meta name="format-detection" content="telephone=no"/>


    <!--使用webkit内核-->
    <meta name="renderer" content="webkit">
    <meta name="renderer" content="ie-stand">
    <!--避免IE使用兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,IE=9" />

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    <style>
        body{margin: 0;padding: 0}
        img{display: block;width: 100%;height: auto;}
    </style>
</head>
<body>
<div id="test">
    <img data-group="测试1" src="./1.jpg">
    <img data-group="测试1" src="./2.jpg">
    <div>
        <img data-group="测试1"  src="./3.jpg">
        <img data-group="测试2" class="hide" src="./4.jpg">
    </div>
    <img  data-group="测试3" src="./5.jpg">
    <img data-group="测试2" class="hide" src="./6.jpg">
</div>

<button class="btn">新增test</button>

<div id="test1" style="margin-top: 80px">
    <img  src="./1.jpg">
    <img  src="./2.jpg">
    <div>
        <img  src="./3.jpg">
        <img class="hide" src="./4.jpg">
    </div>
    <img  src="./5.jpg">
    <img class="hide" src="./6.jpg">
</div>


<button class="btn1">新增test1</button>

</body>
<script src="./jquery-2.1.1.js"></script>
<script src="./fly-zomm-img.min.js"></script>

<script>
    /**
     *
     *  1.新增右上角关闭按钮
     *  2.新增预览分组 属性里面添加 data-group="测试3" 分组分类
     *  3.新增_reload()方法重新载入元素,多用于绑定动态元素
     *  4.修改一个页面多次使用插架BUG
     */

    $(function (){

       var fly =  $('#test').FlyZommImg({
            closeBtn:true,//是否打开右上角关闭按钮
            slitherCallback:function (direction,DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
                console.log('test');

            }
        });

        var fly1 = $('#test1').FlyZommImg({
            miscellaneous:true,//是否显示底部辅助按钮
            closeBtn:true,//是否打开右上角关闭按钮
            slitherCallback:function (direction,DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
                console.log('test1');
            }
        });

        $('.btn').click(function () {
            $('#test').append('<img  data-group="测试4" src="./2.jpg">');
            fly._reload();
        });
        $('.btn1').click(function () {
            $('#test1').append('<img src="./2.jpg">');
            fly1._reload();
        });
    })


</script>
</html>